<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* #content{ */
            /* 不显示，但任然占据文档流 */
            /* visibility: hidden; */
            /* display: none;让元素脱离文档流 */
            /* position: absolute;
            left: -9999px; */
            /* 行内块级 */
            /* 行内块级元素 即不换行，又可以做盒子，设置宽高 */
            /* display: inline-block; */
            /* inline 行内元素 不能设置宽和高的 */
            /* width: 200px;
            height: 200px;
            background-color: green;
            transform: scale(0,0); */
            /* scale: 0; */
            /* opacity: 0; */
            /* display: inline-block; */
            /* transform 相对于 元素本身 */
            /* transform: translate(-100%); */
            /* 离开文档流 */
            /* float: left; */
        /* } */
    </style>
</head>
<body>
    <div id="app">
        <div id="ep1">
            <span id="content">彪悍的人生不需要解释</span>
            <input type="text" id="input" value="彪悍的人生不需要解释">
            <input type="button" id="save" value="Save">
            <input type="button" id="cancel" value="cancel">
        </div>
        <div style="width: 50%;background-color: green;">123</div>
    </div>
    <script>
        // js基于原型式面向对象
        function EditInPlace(){
            // 有什么好处呢？把dom元素作为属性
            this.content=document.getElementById('content');
            this.save=document.getElementById('save');
            this.cancel=document.getElementById('cancel');
            this.input=document.getElementById('input');
            this.bindEvents();
        }
        EditInPlace.prototype={
            // 罗列方法
            convertToText(){
                this.content.style.display='inline';
                this.save.style.display="none";
                this.cancel.style.display="none";
                this.input.style.display="none";
            },
            convertToEdit(){
                this.content.style.display='none';
                this.save.style.display="inline";
                this.cancel.style.display="inline";
                this.input.style.display="inline";
            },
            bindEvents(){
                // 函数是事件的回调函数 this指向元素
                // constructor
                // this->editor
                // let that=this;// 作用域链
                this.content.addEventListener('dblclick',()=>{
                    // 双击的时候
                    // this 丢失，被覆盖
                    // 箭头函数内部没有this
                    this.convertToEdit();
                    // console.log(this);
                })
                this.save.addEventListener('click',()=>{
                    // 拿到当前的值，并动态设置span
                    const val=input.value;
                    content.innerText=val;
                    this.convertToText();
                })
                this.cancel.addEventListener('click',()=>{
                    this.convertToText();
                })
            }
        }
        // html+css
        // window.onload: 页面加载完成
        window.onload=function(){
            let editor=new EditInPlace();
            editor.convertToText();
        }
        
        // js来切换现实/隐藏
        // const save=document.getElementById('save');
        // const cancel=document.getElementById('cancel');
        // const input=document.getElementById('input');
        // const content=document.getElementById('content');
        // // DOM 动态样式
        // function convertToText(){
        //     content.style.display='inline';
        //     save.style.display="none";
        //     cancel.style.display="none";
        //     input.style.display="none";
        // }
        // convertToText();
        // // 函数式编程 组织代码
        // // 功能复杂，流程式的代码不适合
        // // 函数封装，被执行,复用
        // function convertToEdit(){
        //     content.style.display='none';
        //     save.style.display="inline";
        //     cancel.style.display="inline";
        //     input.style.display="inline";
        // }
        // content.addEventListener('dblclick',function(){
        //     convertToEdit();
        //     input.focus();
        // });
        // save.addEventListener('click',function(){
        //     // 拿到当前的值，并动态设置span
        //     const val=input.value;
        //     content.innerText=val;
        //     convertToText();
        // })
        // cancel.addEventListener('click',function(){
        //     convertToText();
        // })
        // setTimeout(()=>{
        //     content.style.display='none';
        //     save.style.display='inline';
        //     cancel.style.display='inline';
        //     input.style.display='inline';
        // },3000)
    </script>
</body>
</html>